<!-- 申诉详情 -->
<template>
	<view class="page">
		<view class="page-content">
			<view class="page-content-title"> <text>相关任务信息</text> <text v-if="obj.result==1||obj.result==2"
					:style="{color:obj.result==1? '#559411':'#e92330'}">申诉{{obj.result==1?"成功":"失败"}}</text>
			</view>
			<!-- 已完成 -->
			<view class="page-content-over" v-if="obj.status!==1">
				<view class="">
					<text>{{obj.deductionType}}</text>
					<text>该内容自动为您隐藏，已扣除 <text class="text">{{`${obj.deductPoints}分`}}</text>
					</text>
				</view>
				<view class="toCard">
					<view class="">
						<text>申诉状态</text>
						<text
							:class=" [(obj.status==0&&'a')||(obj.status==2&&'a') ]">{{(obj.status==0&&'未申诉')||(obj.status==2&&'已结案')||''}}</text>
					</view>
					<view class="">
						<text>目前处理结果</text>
						<text>{{obj.processingResults}}</text>
					</view>
				</view>
				<view class="card">
					<view class="">
						<text>客服留言</text>
						<text>{{obj.remarkTxt}}</text>
					</view>
				</view>
			</view>
			<!-- 进行中 -->
			<view class="no" v-if="obj.status==1">
				<view class=" toCard">
					<view class="">
						<text>任务名称</text>
						<text>{{obj.taskName}}</text>
					</view>
					<view class="">
						<text>任务时间</text>
						<text>{{obj.taskStartTime}} 至 {{obj.taskEndTime}} </text>
					</view>
				</view>
				<view class="colun">
					<text>接单部分-确认接单后取消任务</text>
					<text> {{`预计结案时长${obj.hour}小时`}}</text>
					<text>该内容自动为您隐藏，已扣除 <text class="text">{{`${obj.deductPoints}分`}}</text>
					</text>
				</view>
				<view class="toCard">
					<view class="">
						<text>申诉状态</text>
						<text :class=" [(obj.status==1&&'b')]">{{(obj.status==1&&'申诉中')||''}}</text>
					</view>
					<view class="">
						<text>目前处理结果</text>
						<text>{{obj.processingResults}}</text>
					</view>
				</view>
				<view class=" card">
					<view class="">
						<text>客服留言</text>
						<text>{{obj.remarkTxt}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				id: '',
				obj: {},
			}
		},
		mounted() {
			this.getDetail()
		},
		onLoad(value) {
			this.id = value.id
		},
		methods: {
			async getDetail() {
				let res = await this.$fetch(this.$api.get_appeal_list_detail, {
					id: this.id
				}, 'GET')
				if (res.code) return
				let data = res.data
				for (let key in data) {
					if (['createTime', 'taskStartTime', 'taskEndTime'].includes(key)) {
						try {
							data[key] = data[key].substring(5, 16)
						} catch (e) {
							//TODO handle the exception
						}
					}
				}
				this.obj = data
			},
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	})
</script>
<style lang="scss" scoped>
	.page {
		width: 100w;
		height: 100vh;
		display: flex;

		&-content {
			width: 694rpx;
			margin: 50rpx auto 20rpx;

			&-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			&-over {
				&>view:nth-child(1) {
					height: 152rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					opacity: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					overflow: hidden;

					&>text {
						margin-left: 20rpx;
					}

					&>text:nth-child(1) {
						margin-bottom: 14rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #262626;
					}

					&>text:nth-child(2) {
						font-size: 24rpx;
						color: rgba(38, 38, 38, 1);

						.text {
							color: #DB1211 !important;
							font-weight: 800;
							margin-left: 10rpx;
						}
					}
				}
			}

			.no {
				.colun {
					display: flex;
					flex-direction: column;
					padding: 30rpx 20rpx;
					background: #FFF;
					border-radius: 24rpx;
					margin-top: 20rpx;

					&>text:first-child {
						font-size: 32rpx;
						font-weight: bold;
						color: #262626;
					}

					&>text:nth-child(2) {
						font-size: 28rpx;
						font-weight: 400;
						color: #515151;
						margin-top: 14rpx;
					}

					&>text:last-child {
						font-size: 24rpx;
						color: rgba(38, 38, 38, 1);
						margin-top: 14rpx;

						.text {
							color: #DB1211 !important;
							font-weight: 800;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.toCard {
		margin-top: 20rpx;
		height: 160rpx;
		background: #FFF;
		border-radius: 12rpx;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>view:first-child {
			margin: 0 0 20rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}

		&>view {
			&>text:first-child {
				font-size: 28rpx;
				font-weight: 400;
				color: #262626;
			}

			&>text:last-child {
				font-size: 28rpx;
				font-weight: 400;
				color: #515151;
				margin-right: 20rpx;
			}
		}

		&>view:last-child {
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.card {
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		background: #FFF;
		border-radius: 12rpx;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>view {
			display: flex;
			justify-content: space-between;

			&>text:first-child {
				font-size: 28rpx;
				font-weight: 400;
				color: #262626;
			}

			&>text:last-child {
				font-size: 28rpx;
				font-weight: 400;
				color: #515151;
			}
		}
	}

	.a {
		color: #515151 !important;
	}

	.b {
		color: #FF851D !important;
	}

	.c {
		color: #DB1211 !important;
	}
</style>